<template>
	<view>
		<view class="student-info box box-align-start">
			<u-avatar size="100" src="https://www.wytldy.com/file/wxIMG/images/avr.png"></u-avatar>
			<view class="ml10" style="margin-top: 8rpx;">
				<text style="font-size: 34rpx;color: #fff;">王晓晓</text><br>
				<text class="mt10" style="font-size: 24rpx;color: #fff;">2021年6月15日 18:00</text>
			</view>
			<view class="score">
				优秀
			</view>
		</view>
		<view class="content">
			<view class="list">
				新闻传播学院
				<text class="tip">院系</text>
			</view>
			<view class="list">
				2021级新闻传播201班
				<text class="tip">班级</text>
			</view>
			<view class="list">
				生活劳动·家庭日常
				<text class="tip">劳动分类</text>
			</view>
			<view class="list">
				鸡蛋黄瓜捞面
				<text class="tip">劳动名称</text>
			</view>
			<view class="list" style="height: auto;line-height: 40rpx;padding: 20rpx 28rpx;">
				1.材料准备好：干挂面、鸡蛋、黄瓜。
				2.先烧水，与此同时处理食材：黄瓜切薄片，大蒜
				切末。
				3.炒锅中倒适量油，油温4、5成热时，将鸡蛋直接
				磕入锅中，用筷子将蛋黄搅散。
				4.油温不断升高，鸡蛋液逐渐凝固，将大蒜末入锅
				中煸炒出香味。
				5.黄瓜片入锅，翻炒几下即关火；黄瓜片不宜炒太
				烂，微变色，利用余温进一步加热；口味重的可在
				此时撒少许盐入味。

				<view class="images box box-align-center">
					<view v-for="(item,index) in list" :key="index">
						<u-image width="174rpx" height="174rpx" :src="item.url">
						</u-image>
					</view>
				</view>
				<text class="tip">劳动成果</text>
			</view>
			<view class="list">
				做的很棒！！
				<text class="tip">评语</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					url:"https://www.wytldy.com/file/wxIMG/images/avr.png"
				},
				{
					url:"https://www.wytldy.com/file/wxIMG/images/avr.png"
				},
				{
					url:"https://www.wytldy.com/file/wxIMG/images/avr.png"
				},
				{
					url:"https://www.wytldy.com/file/wxIMG/images/avr.png"
				},
				{
					url:"https://www.wytldy.com/file/wxIMG/images/avr.png"
				}]
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.student-info {
		position: relative;
		box-sizing: border-box;
		padding: 37rpx 35rpx;
		width: 750rpx;
		height: 348rpx;
		background: #7686F6;
		z-index: -1;
	}

	.score {
		position: absolute;
		top: 28rpx;
		right: 17rpx;
		width: 179rpx;
		height: 179rpx;
		line-height: 179rpx;
		text-align: center;
		color: #FF943B;
		background: #FFF9EC;
		font-size: 50rpx;
		border: 1px solid #FF943B;
		border-radius: 50%;
		transform: rotate(45deg);
	}

	.content {
		box-sizing: border-box;
		margin: -178rpx auto 0;
		padding: 65rpx 37rpx;
		width: 722rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0rpx 23rpx 46rpx 0rpx rgba(205, 207, 230, 0.18);
		border-radius: 20rpx;
	}

	.list {
		margin-top: 50rpx;
		position: relative;
		padding: 0 28rpx;
		width: 648rpx;
		height: 82rpx;
		line-height: 82rpx;
		border: 1px solid #E9EDF5;
		border-radius: 6rpx;
		word-break: break-all;
		font-size: 28rpx;
		color: #181623;
		
		&:first-child{
			margin-top: 0;
		}

		text {
			position: absolute;
			padding: 5rpx 10rpx;
			height: 25rpx;
			line-height: 15rpx;
			font-size: 22rpx;
			background-color: #fff;
		}

		.tip {
			position: absolute;
			top: -8rpx;
			left: 20rpx;
			color: #5F6572;
			font-size: 22rpx;
		}

		.images {
			box-sizing: border-box;
			flex-wrap: wrap;
			padding: 13rpx;
			width: auto;
			height: auto;
			background: #F6F7F9;
			border-radius: 6rpx;
			
			view{
				margin: 0 16rpx 16rpx 0;
				&:nth-child(3n){
					margin-right: 0;
				}
			}
			
		}
	}
</style>
